<template>
    <div>
        <back-head title="商品池"></back-head>
        <!-- 搜索条件 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>筛选查询</span>
            </div>
            <el-form :inline="true" :model="searchData" ref="ruleForm" label-width="90px" :rules="rules">
                <el-form-item label="商品SPU：" prop="productCode">
                    <el-input 
                        v-model="searchData.productCode"
                        placeholder="请输入商品spu"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="商品SKU：" prop="productSkuCode">
                    <el-input 
                        v-model="searchData.productSkuCode"
                        placeholder="请输入商品sku"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <type-cascader ref="cascader" label="分类："></type-cascader>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 数据列表 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据列表</span>
            </div>
            <el-row>
                <merge-table ref="table" :dataList="dataList" :rowSet="rowSet" :sameAttr="sameAttr">
                    <el-table-column
                        width="60">
                        <template slot-scope="scope">
                            <el-checkbox-group v-model="checkedData" @change="handleSelectionChange">
                                <el-checkbox :label="scope.row.itemId">
                                    <span style="display: none;"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="itemId"
                        label="商品（SPU）"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="itemName"
                        label="网易商品名称"
                        min-width="150">
                    </el-table-column>
                    <el-table-column
                        width="150"
                        label="商品分类">
                        <template slot-scope="scope">
                            <p v-for="list in scope.row.categoryList" :key="list">{{list}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="商品图"
                        width="150">
                        <template slot-scope="scope">
                            <img :src="scope.row.skuPicUrl" alt="" style="width: 100%;">
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="skuCode"
                        label="商品（SKU）"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        label="商品规格信息"
                        width="150">
                        <template slot-scope="scope">
                            <div v-for="data in scope.row.itemSkuSpecVOList" :key="data.name">
                                <p v-if="data.type == 0">{{data.name}}：{{data.value}}</p>
                                <img v-else :src="data.picUrl" alt="" style="width: 100%">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="渠道价格"
                        width="100">
                        <template slot-scope="scope">
                            ￥{{scope.row.channelPrice | toFixed2}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="inventory"
                        label="库存"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        fixed="right"
                        width="130">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-reading" @click="checkDetail(scope.row.itemId)">查看详情</el-button>
                            <el-button v-if="scope.row.productStatus == 1" type="text" icon="el-icon-lx-add" @click="joinShopList(scope.row.itemId)" class="orange">加入商品列表</el-button>
                            <el-button v-else type="text" disabled>已入商品列表</el-button>
                        </template>
                    </el-table-column>
                </merge-table>
            </el-row>
        </el-card>

        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">当页全选</el-checkbox>
                <el-select v-model="joinList" style="width: 130px;margin-right: 15px;">
                    <el-option
                        label="加入商品列表"
                        value="1">
                    </el-option>
                </el-select>
                <el-button @click="joinShopList(checkedData)">确定</el-button>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import mergeTable from '../../common/spanMergeTable.vue';
    import typeCascader from '../../common/typeCascader.vue';
    export default {
        name: 'goodsPool',
        components: {
            mergeTable, typeCascader
        },
        data() {
            let checkNum = (rule, value, callback)=>{
                if(value ==''){
                    callback();
                }
                if(!this.util.RegExpr.checkNum(value)){
                    callback(new Error('此字段只支持数字'));
                }else{
                    callback();
                }
            };
            return {
                rules:{
                    productCode: [
                        { validator: checkNum, trigger: 'blur', require : false}
                    ],
                    productSkuCode: [
                        { validator: checkNum, trigger: 'blur', require : false}
                    ]
                },
                searchData : {
                    productCode : '',
                    productSkuCode : ''
                },
                dataList : [],    //list数据
                sameAttr: 'itemId',
                rowSet: [0, 1, 2, 3, 9],
                checkAll: false,
                isIndeterminate: false,
                checkedGameId : [], //所有数据的id集合
                checkedData : [],   //当前选中的数据id集合
                joinList: '1',
                current : 1,  //当前页码
                pageSize : Number(localStorage.getItem('pageSize')),
                total : 0
            }
        },
        computed: {
            
        },
        created(){
            
        },
        mounted(){
            this.getData();  //获取列表数据
        },
        methods: {
            getTypeList(state){
                const allOption = {
                    categoryCode: '',
                    categoryName: '全部'
                }
                this.$axios
                    .post("/admin/category/getItemsCategoryList.json",{
                        categoryCode: state == 1 ? '' : this.searchData.typeSelect
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            if(state == 1){    //获取一级菜单
                                this.searchData.typeList = [allOption, ...data.list];
                            }else if(state == 2){     //获取二级菜单
                                this.searchData.typeSelect2 = '';  //初始化二级菜单选择
                                if(this.searchData.typeSelect == ''){
                                    this.searchData.typeList2 = [allOption];
                                }else{
                                    this.searchData.typeList2 = [allOption, ...data.list];
                                }
                            }
                        }else{
                            this.$message.error(data.message);
                        }
                    })
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.getData();
                    } else {
                        return false;
                    }
                });
            },
            checkDetail(data){
                this.$router.push({ path: '/goodsPoolDetail', query: { id: data }})
            },
            getData(){
                this.$axios
                    .post("/admin/product/getProductPoolList.json",{
                        productCode: this.searchData.productCode,
                        productSkuCode: this.searchData.productSkuCode,
                        oneCategoryLevel: this.$refs['cascader'].typeSelect,
                        twoCategoryLevel: this.$refs['cascader'].typeSelect2,
                        pageNo: this.current,
                        pageSize: this.pageSize
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.dataList = data.list;
                            if(data.pageInfo){
                                //获取分页信息
                                this.current = data.pageInfo.pageIndex;
                                this.total = data.pageInfo.recordCount;
                            }
                            //获取数据合并后的id集合
                            this.checkedGameId = this.util.fnNumber.mergeData(this.dataList,this.sameAttr);
                        }else{
                            this.$message.error(data.message);
                            return false
                        } 
                    })
                
            },
            //列表中选择框的点击事件
            handleSelectionChange(val){
                val = this.util.fnNumber.deleteSame(val);  //给数组去重
                const checkedCount = val.length;   //所选择的条数
                const mergeNum = this.$refs['table'].mergeNum;  //合并的条数
                const dataLength = this.dataList.length - mergeNum; //合并后的总条数
                this.checkAll = dataLength == checkedCount;
                this.isIndeterminate = checkedCount > 0 && checkedCount < dataLength;
            },
            //全选按钮点击事件
            handleCheckAllChange(val){
                this.checkedData = val ? this.checkedGameId : [];
                this.isIndeterminate = false;
            },
            joinShopList(ids){
                if(ids.length == 0){
                    this.$message.error('请选择数据！');
                    return;
                }
                const idsArr = this.util.fnNumber.tranString(ids);    //转换为数组格式
                this.$confirm('是否将该商品加入商品列表？', '提示', {
                    type: 'info'
                }).then(()=>{
                    this.$axios
                        .post("/admin/product/addProductList.json",{
                            itemIds: idsArr
                        })
                        .then(res => {
                            const data = res.data;
                            if(data.success){
                                this.$message.success("加入成功");
                                this.getData();
                            }else{
                                this.$message.error(data.message);
                            }             
                        })
                }).catch(()=>{
                    
                })
                
            }
        }
    }

</script>


<style scoped>
    .orange{
        color: #ff9800;
    }
</style>
